<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="供应商">
            <el-select v-model="searchForm.supplierId" placeholder="请选择供应商">
              <el-option
                v-for="item in supplierList"
                :key="item.id"
                :label="item.supplierName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单据编号">
            <el-input v-model="searchForm.purchaseNo" placeholder="请输入单据编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="到货日期">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增-->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleCreate">新增入库单</el-button>
        <el-button type="primary" @click="handleCreate">下载模板</el-button>
        <el-button type="primary" @click="handleCreate">批量上传</el-button>
      </div>
      <div @click="handleGetTableList()">
        <el-button circle>
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column label="单据编号" align="center" />
      <el-table-column label="供应商" align="center" />
      <el-table-column label="进货员" align="center" />
      <el-table-column label="进货日期" align="center" />
      <el-table-column label="单据状态" align="center" />
      <el-table-column label="金额" align="center" />
      <el-table-column label="备注" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <form-dialog ref="formDrawerRef" width="98%" top="2vh" @submit="handleSubmitOrder">
      <div class="dialog-body">
        <el-form ref="formRef" :model="form" :rules="rules">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label-width="100px" label="供应商" prop="supplierId">
                <el-select v-model="form.supplierId">
                  <el-option
                    v-for="item in supplierList"
                    :key="item.id"
                    :label="item.supplierName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="到货日期" prop="deliveryTime" label-width="100px">
                <el-date-picker
                  v-model="form.deliveryTime"
                  type="date"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="支付方式" prop="paySource" label-width="100px">
                <el-select v-model="form.paySource">
                  <el-option label="支付宝" :value="1"></el-option>
                  <el-option label="微信" :value="2"></el-option>
                  <el-option label="现金" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mt-4">
              <el-form-item label="备注" label-width="100px">
                <el-input v-model="form.remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider />
          <div class="flex justify-end">
            <el-button type="primary" @click="handleAddAccessory">添加配件</el-button>
          </div>
          <el-table :data="form.productList" height="420">
            <el-table-column label="名称" align="center">
              <template #default="{ row }">
                <el-form-item>
                  <el-select
                    v-model="row.productId"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入配件名称关键字"
                    remote-show-suffix
                    :remote-method="handleRemoteMethod"
                    :loading="loading"
                  >
                    <el-option
                      v-for="item in partsList"
                      :key="item.id"
                      :label="item.productName"
                      :value="item.id"
                    />
                    <template #loading>
                      <svg class="circular" viewBox="0 0 50 50">
                        <circle class="path" cx="25" cy="25" r="20" fill="none" />
                      </svg>
                    </template>
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="仓位" width="300" align="center">
              <template #default="{ row }">
                <el-form-item>
                  <el-input v-model="row.warehouseLocation"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="数量" width="120" align="center">
              <template #default="{ row }">
                <el-form-item>
                  <el-input v-model="row.outNum" type="number" :min="1" v-integer-number></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="成本价" width="120" align="center">
              <template #default="{ row }">
                <el-form-item>
                  <el-input v-model="row.purchaseAmount" type="number" :min="1" v-number></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="售价" width="120" align="center">
              <template #default="{ row }">
                <el-form-item>
                  <el-input v-model="row.saleAmount" type="number" :min="1" v-number></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80" align="center">
              <template #default="{ $index }">
                <el-icon class="cursor-pointer" color="red" @click="handleDeleteAccessory($index)"
                  ><Delete
                /></el-icon>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
    </form-dialog>
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useDebounceFn } from "@vueuse/core";
import FormDialog from "@/components/FormDialog.vue";
import { useInitForm, useInitTable } from "@/hooks/useCommon";
import { getPartsListApi } from "@/api/repair";
import { getSupplierListApi, getPurchaseOrderPageApi, addPurchaseOrderApi } from "@/api/stock";

onMounted(() => {
  handleGetSupplierList();
});
// 表格
const { searchForm, tableData, handleRestSearch, handleGetTableList } = useInitTable({
  searchForm: {
    supplierId: "",
    purchaseNo: ""
  },
  getTableList: getPurchaseOrderPageApi
});

// 新增编辑
const { formDrawerRef, formRef, form, rules, handleCreate, handleEdit, handleSubmit } = useInitForm(
  {
    form: {
      supplierId: "",
      deliveryTime: "",
      paySource: "",
      remark: "",
      productList: [
        {
          productId: "",
          warehouseLocation: "",
          outNum: "",
          purchaseAmount: "",
          saleAmount: ""
        }
      ]
    },
    rules: {
      supplierId: [{ required: true, message: "请选择供应商", trigger: "change" }],
      deliveryTime: [{ required: true, message: "请选择到货日期", trigger: "change" }],
      paySource: [{ required: true, message: "请选择支付方式", trigger: "change" }]
    },
    createData: addPurchaseOrderApi
  }
);

// 搜索配件名称
const loading = ref(false);
const partsList = ref<any[]>([]);
const handleRemoteMethod = useDebounceFn(async (query: string) => {
  if (query) {
    loading.value = true;
    try {
      const res = await getPartsListApi({
        productName: query
      });
      partsList.value = res as any;
    } finally {
      loading.value = false;
    }
  }
}, 1000);

// 添加
const handleAddAccessory = () => {
  form.productList.push({
    productId: "",
    warehouseLocation: "",
    outNum: "",
    purchaseAmount: "",
    saleAmount: ""
  });
};

// 删除
const handleDeleteAccessory = (index: number) => {
  form.productList.splice(index, 1);
};

// 入库单提交
const handleSubmitOrder = () => {
  // console.log(form, "--tst");
  handleSubmit();
};
// 获取供应商列表
const supplierList = ref<any[]>([]);
const handleGetSupplierList = async () => {
  const res = await getSupplierListApi();
  if (res) {
    const curItem = (res as any).map((item: any) => ({
      id: item.id,
      supplierName: item.supplierName
    }));
    supplierList.value = curItem;
  }
};

const value1 = ref(void 0)
const handleDelete = (value: any) => {}
</script>
<style scoped lang="scss">
:deep(.el-select-dropdown__loading) {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 20px;
}

.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}
.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}
@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}
.dialog-body {
  height: calc(100vh - 200px);
  overflow-y: auto;
}
:deep(.cell) {
  padding: 0;
}
:deep(.el-form-item) {
  margin-bottom: 0;
}
</style>
